<template>
  <div>
    <el-card class="topCard">
      <span>设备名称：</span>
      <el-input placeholder="请输入名称"></el-input>
      <span>实验室名称：</span>
      <el-input placeholder="请输入序列号"></el-input>
      <el-button type="primary">查询</el-button>

    </el-card>

    <el-card class="bottomCard">
      <span>数据采集</span>

      <!-- 表格 -->
      <el-table :data="dataList[0]"
                border
                style="width: 100%">
        <el-table-column label="#"
                         type="index">
        </el-table-column>
        <el-table-column prop="deviceName"
                         label="设备名称">
        </el-table-column>
        <el-table-column prop="temValue"
                         label="数据">
        </el-table-column>
        <el-table-column label="其他">
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <el-pagination background
                     layout="prev, pager, next"
                     :total="4"
                     :page-size="2">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
import { getData } from '../../network/temperature.js';
export default {
  name: 'Device',
  data () {
    return {
      dataList: []
    }
  },
  created () {
    this.getTemData();
  },
  methods: {
    async getTemData () {
      const res = await getData();
      console.log(res.data);
      if (res.status !== 200) {
        return this.$message.error('获取数据列表失败!');
      }
      this.dataList.push(res.data)
      // console.log(this.dataList);
      console.log(this.dataList[0]);
    }
  },
}
</script>

<style scoped>
.topCard {
  height: 80px;
}

.topCard .el-input {
  width: 250px;
  height: 50px;
  margin-right: 100px;
}

.bottomCard span {
  font-size: 20px;
}

.addDevice {
  float: right;
  width: 119px;
  height: 40px;
}

.el-table {
  margin-top: 30px;
}

.el-table-column {
  height: 67px;
}

.el-table i {
  font-size: 20px;
  margin-right: 50px;
}

.el-pagination {
  float: right;
  margin: 20px 0 20px 0;
}
</style>